<!-- 取消退费申请 -->
<template>
  <el-dialog
    title="取消退费申请"
    :visible.sync="visible"
    width="800px"
    @close="handleClose"
    class="refund-dialog"
  >
    <!-- 退费申请信息区域（优化后） -->
    <div class="refund-info-section">
      <h3 class="section-title">退费申请信息</h3>
      <el-descriptions :column="2" border class="custom-descriptions">
        <el-descriptions-item label="缴费状态">
          <span>{{ dict.payment_status[Number(applyInfo.paymentState)] }}</span>
        </el-descriptions-item>
        <el-descriptions-item label="缴费方式">
          <span>{{
            dict.payment_method[Number(applyInfo.paymentMethod)]
          }}</span>
        </el-descriptions-item>
        <el-descriptions-item label="培训状态">{{
          applyInfo.trainingStatus
        }}</el-descriptions-item>
        <el-descriptions-item label="考试状态">{{
          applyInfo.examStatus
        }}</el-descriptions-item>
        <el-descriptions-item label="姓名">{{
          applyInfo.studentName
        }}</el-descriptions-item>
        <el-descriptions-item label="身份证号">{{
          applyInfo.idNumber
        }}</el-descriptions-item>
        <el-descriptions-item label="联系方式">{{
          applyInfo.phonenumber
        }}</el-descriptions-item>
        <el-descriptions-item label="单位">{{
          applyInfo.unitName
        }}</el-descriptions-item>
        <el-descriptions-item label="申请时间">{{
          applyInfo.refundTime
        }}</el-descriptions-item>
        <el-descriptions-item label="申请人">{{
          applyInfo.refundPerson
        }}</el-descriptions-item>
        <el-descriptions-item label="联系方式">{{
          applyInfo.unitPhonenumber
        }}</el-descriptions-item>
        <el-descriptions-item label="报名项目">{{
          applyInfo.projectMap
        }}</el-descriptions-item>
        <el-descriptions-item label="培训班">{{
          applyInfo.trainingClass
        }}</el-descriptions-item>
        <el-descriptions-item label="培训类别">
          <span>{{ dict.training_type[Number(applyInfo.trainingType)] }}</span>
        </el-descriptions-item>
        <el-descriptions-item label="费用">{{
          applyInfo.paymentAmount
        }}</el-descriptions-item>
        <el-descriptions-item label="退费金额">{{
          applyInfo.refundAmount
        }}</el-descriptions-item>
        <el-descriptions-item label="退费原因">{{
          applyInfo.refundReason
        }}</el-descriptions-item>
      </el-descriptions>
    </div>

    <!-- 审核操作区域 -->
    <el-form
      :model="auditForm"
      :rules="auditRules"
      ref="auditForm"
      label-width="100px"
      class="audit-form"
    >
      <!-- 移除了退费金额和退费原因输入框 -->
    </el-form>

    <div slot="footer" class="dialog-footer">
      <el-button @click="handleClose">取消</el-button>
      <el-button type="primary" @click="handleSubmit">取消退费申请</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { MessageBox } from "element-ui";
export default {
  name: "CancelRefundDialog",
  props: {
    // 控制对话框显示/隐藏
    visible: {
      type: Boolean,
      default: false,
    },
    // 退费申请信息（从父组件传入）
    applyInfo: {
      type: Object,
      default: () => ({}),
    },
    dict: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      // 审核表单数据（已移除 refundAmount 和 refundReason）
      auditForm: {
        // refundAmount: "",
        // refundReason: ""
      },
      // 审核表单验证规则（已移除对应字段）
      auditRules: {
        // refundAmount: [
        //   { required: true, message: "请输入退费金额", trigger: "blur" }
        // ],
        // refundReason: [
        //   { required: true, message: "请输入退费原因", trigger: "blur" },
        //   { max: 500, message: "退费原因不能超过500个字符", trigger: "blur" }
        // ]
      },
    };
  },
  methods: {
    // 提交审核结果
    handleSubmit() {
      // 不再需要验证表单
      this.$confirm(
        "是否取消同意“" + this.applyInfo.studentName + "”的退费申请？",
        "系统提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "info",
        }
      )
        .then(() => {
          this.$message.success("取消退费申请成功！");
          const submitData = false;
          this.$emit("submit", submitData);
          this.handleClose();
        })
        .catch(() => {
          this.$message.info("已取消操作");
        });
    },
    // 关闭对话框
    handleClose() {
      this.$emit("update:visible", false);
      this.$nextTick(() => {
        if (this.$refs.auditForm) {
          this.$refs.auditForm.resetFields();
        }
      });
    },
  },
};
</script>

<style scoped>
/* 样式保持不变 */
.refund-dialog ::v-deep .el-dialog__body {
  padding: 20px 24px;
  max-height: 600px;
  overflow-y: auto;
}

.refund-dialog ::v-deep .el-dialog__header {
  padding: 16px 24px;
  border-bottom: 1px solid #f2f3f5;
  text-align: center;
}

.refund-dialog ::v-deep .el-dialog__title {
  font-size: 18px;
  font-weight: 600;
}

.refund-info-section {
  margin-bottom: 24px;
}

.section-title {
  font-size: 16px;
  font-weight: 600;
  color: #1d2129;
  margin: 0 0 16px 0;
  padding-left: 4px;
  border-left: 3px solid #409eff;
}

.custom-descriptions ::v-deep .el-descriptions {
  font-size: 14px;
}

.custom-descriptions ::v-deep .el-descriptions-item__label {
  background-color: #f7f8fa;
  font-weight: 500;
  color: #4e5969;
  padding: 12px 16px;
  width: 120px;
  text-align: right;
}

.custom-descriptions ::v-deep .el-descriptions-item__content {
  color: #1d2129;
  padding: 12px 16px;
  word-break: break-all;
}

.custom-descriptions ::v-deep .el-descriptions__border {
  border: 1px solid #e5e6eb;
}

.custom-descriptions ::v-deep .el-descriptions-item {
  border-bottom: 1px solid #e5e6eb;
}

.custom-descriptions ::v-deep .el-descriptions-item:last-child {
  border-bottom: none;
}

.custom-descriptions ::v-deep .el-descriptions-item:hover {
  background-color: #f7f8fa;
}

.audit-form {
  padding: 16px;
  background-color: #f7f8fa;
  border-radius: 4px;
}

.audit-form ::v-deep .el-form-item {
  margin-bottom: 16px;
}

.audit-form ::v-deep .el-textarea__inner {
  resize: vertical;
}

.dialog-footer {
  padding: 12px 24px;
  border-top: 1px solid #f2f3f5;
  text-align: right;
}

@media (max-width: 768px) {
  .custom-description ::v-deep .el-descriptions {
    grid-template-columns: 1fr !important;
  }

  .custom-description ::v-deep .el-descriptions-item__label {
    width: auto;
    text-align: left;
  }
}
</style>